<template>
	<div class="item-box">
		<div class="grade_item clearfix" @click="goSchoolInfo(item.schoolId)"
				v-for="item in closeScoreSchools">
			<a class="row">
				<div class="col-lg-1">
					<img :src="item.schoolLogo" >
				</div>
				<div class="col-lg-11">
					<div class="grade_school_info">
						<div class="school_title cursor hover_style">
							<p>{{item.schoolName}}</p>
						</div>
						<p class="school_tag">
							<span class="school_tag_text ">{{item.schoolType}}</span>&nbsp;| &nbsp;
							<span class="school_tag_text ">{{item.feature}}</span>&nbsp;| &nbsp;
							<span class="school_tag_text ">{{item.schoolLoScore}}</span>
						</p>
					</div>
				</div>
				
			</a>
		</div>
	</div>
	
</template>

<script>
	export default{
		name: 'schoolRecommend',
		data(){
			return{
				closeScoreSchools: [],
				// schoolLogo: '',
			}
		},
		props: ['schoolId'],  // 从父组件传过来的值
		methods:{
			// 点击前往查看该学校
			goSchoolInfo(schoolId){
				// console.log(schoolId);
				const { href } = this.$router.resolve({
				      path: `/schoolInfo`,
				      query: {
				        id: schoolId,
				      }
				    });
				window.open(href, '_blank');
			},
			// 从后台获取推荐学校信息
			getCloseScoreSchool(){
				var param = this.$qs.stringify({
					schoolId: this.schoolId
				});
				
				this.$axios.post("/school/getCloseScoreSchool", param)
					.then(rst => {
						// console.log(rst.data);
						this.closeScoreSchools = rst.data;
						// this.schoolLogo = this.schoolInfos.schoolLogo;
					}).catch(ex => {
						console.log(ex);
					});
			},
		},
		created() {
			this.getCloseScoreSchool();
		}
	}
</script>

<style scoped>
	.grade_item {
	    padding: 20px 0 0px 21px;
	}
	.clearfix {
	    zoom: 1;
	}
	.grade_item a {
	    color: #1890ff;
	    text-decoration: none;
	    background-color: transparent;
	    outline: none;
	    cursor: pointer;
	    -webkit-transition: color 0.3s;
	    transition: color 0.3s;
	    -webkit-text-decoration-skip: objects;
	}
	.grade_item img {
	    float: left;
	}
	/* .grade_item .cursor {
	    cursor: pointer;
	} */
	.grade_item img {
		float: left;
		width: 50px;
		/* height: 60px; */
	    /* vertical-align: middle; */
	    border-style: none;
	}
	.grade_item .grade_school_info {
	    /* float: left; */
	    margin-left: 38px;
	}
	.grade_item .grade_school_info .school_title {
	    font-size: 16px;
	    font-weight: 400;
	    color: #000000;
	    margin-bottom: 15px;
	    height: 24px;
	}
	.grade_item .grade_school_info .school_title p {
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    max-width: 270px;
	    float: left;
	    margin: 0px !important;
		margin: 0;
		padding: 0;
	}
	/* .grade_item .grade_school_info .school_tag {
	    font-size: 14px;
	    font-weight: 400;
	    max-width: 290px;
	    color: #1ea5eb;
	}
	.grade_item .grade_school_info .school_tag p {
	    margin: 0;
	    padding: 0;
	} */
	
</style>
